<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <div class="head">
        <div class="container">
          {{ $t("title.doc37") }}
        </div>
      </div>
    </template>
    <template #content>
      <div class="container">
        <ul class="box1 wrap bet">
          <li class="itemBox rel">
            <div class="title-1">
              <img src="../../assets/images/Group14.png" alt="" />
              {{ $t("page3.doc59") }}
            </div>
            <div class="am" style="color: #fde071">
              <span>{{ common.decal2(teamData.incomeAmount) }}</span
              >USDT
            </div>
          </li>
          <li class="itemBox rel">
            <div class="title-1">
              <img src="../../assets/images/Group15.png" alt="" />
              {{ $t("new.doc1") }}
            </div>
            <div class="am">
              <span>{{ common.decal2(teamData.todayIncome) }}</span
              >USDT
            </div>
          </li>
        </ul>

        <div class="box2" style="margin-bottom: 0.32rem">
          <div class="title_my">{{ $t("page.doc64") }}</div>
          <div class="part">
            <div class="info">
              <div id="myChart" style="height: 2.7rem"></div>
              <div class="total_revenue">
                <div class="name">{{ $t("page.doc72") }}</div>
                <div class="value">
                  {{
                    (parseFloat(myChartValue1 ? myChartValue1 : 0) +
                      parseFloat(myChartValue2 ? myChartValue2 : 0) +
                      parseFloat(myChartValue3 ? myChartValue3 : 0))
                      | Svalues
                  }}
                </div>
              </div>
            </div>
            <div class="myChart_but">
              <!--              <div class="top">-->
              <div class="top-item">
                <div class="color-box color-box1"></div>
                <div>
                  {{ $t("new.doc2") }}
                  {{ myChartValue1 ? common.decal2(myChartValue1) : 0 }}
                </div>
              </div>
              <div class="top-item">
                <div class="color-box color-box2"></div>
                <div>
                  {{ $t("new.doc3") }}
                  {{ myChartValue2 ? common.decal2(myChartValue2) : 0 }}
                </div>
              </div>
              <!--              </div>-->
              <div class="top-item">
                <div class="color-box color-box3"></div>
                <div>
                  {{ $t("new.doc28") }}
                  {{ myChartValue3 ? common.decal2(myChartValue3) : 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <Btn
          :isOn="true"
          :btnText="$t('new.doc4')"
          @clickBtn="path_url('/promote/team')"
          class="btn_box"
        />

        <div class="box3">
          <div class="top">
            <div>
              <div class="img">
                <img src="../../assets/images/team.png" alt="" />
              </div>
              <div class="title">{{ $t("new.doc5") }}</div>
              <div class="number">{{ memberCount }}</div>
            </div>
            <div>
              <div class="img">
                <img src="../../assets/images/addNumber.png" alt="" />
              </div>
              <div class="title">{{ $t("new.doc53") }}</div>
              <div class="number" style="color: #FFDD9A">0</div>
            </div>
          </div>
          <!--          <div class="it" style="border: 0; padding-top: 0">-->
          <!--            <ul class="teamAdd flex">-->
          <!--              <li>-->
          <!--                <div class="s">{{ teamData1.todayCount || 0 }}</div>-->
          <!--                <div class="n">-->
          <!--                  {{ $t("new.doc53") }}-->
          <!--                </div>-->
          <!--              </li>-->
          <!--              <li>-->
          <!--                <div class="s">{{ teamData1.preWeekCount || 0 }}</div>-->
          <!--                <div class="n">-->
          <!--                  {{ $t("new.doc48") }}-->
          <!--                </div>-->
          <!--              </li>-->
          <!--              <li>-->
          <!--                <div class="s">{{ teamData1.thisWeekCount || 0 }}</div>-->
          <!--                <div class="n">-->
          <!--                  {{ $t("new.doc49") }}-->
          <!--                </div>-->
          <!--              </li>-->
          <!--            </ul>-->
          <!--          </div>-->
          <div class="it-box">
            <div class="it" v-for="(item, k) in generationsData" :key="k">
              <div class="tit" v-if="k == 0">{{ $t("new.doc9") }}</div>
              <div class="tit cname" v-if="k == 1">{{ $t("new.doc10") }}</div>
              <div class="tit cname" v-if="k == 2">{{ $t("new.doc11") }}</div>
              <!-- <div class="tit cname" v-if="k == 3">{{ $t('page.doc7001') }}</div>
              <div class="tit cname" v-if="k == 4">{{ $t('page.doc7002') }}</div>
              <div class="tit cname" v-if="k == 5">{{ $t('page.doc7003') }}</div> -->
              <ul class="flex">
                <li>
                  <div class="s">{{ item.teamCount }}</div>
                  <div class="n">{{ $t("new.doc8") }}</div>
                </li>
                <li>
                  <div class="s">{{ common.decal2(item.incomeAmount) }}</div>
                  <div class="n">{{ $t("new.doc7") }}</div>
                </li>
                <li>
                  <div class="s">{{ common.decal2(item.todayIncome) }}</div>
                  <div class="n">{{ $t("new.doc6") }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <glFooter :activeTitle="activeTitle"></glFooter>
    </template>
  </page-scroll>
</template>

<script>
import Btn from "@/components/public/Btn.vue";
import common from "../../utils/common";

export default {
  computed: {
    common() {
      return common;
    },
  },
  components: { Btn },
  data() {
    return {
      activeTitle: "promote",
      teamData: [],
      data1: [],
      generationsData: [],
      teamData1: [],
      momoShow: false,
      showPopover: false,
      actions: [{ text: "选项一" }],
      myChartValue1: "",
      myChartValue2: "",
      myChartValue3: "",
      memberCount: 0,
    };
  },

  mounted() {
    this.teamInfo();
    this.teamInfo1();
    //this.getIncome()
    this.getGenerations();
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
      return 0;
    },
  },
  methods: {
    getGenerations() {
      this.$post(this.URL.income.generations, {
        generations: 6,
      }).then((res) => {
        if (res.code == 0) {
          // this.generationsData = res.data
          let data = res.data;
          let arr = [];
          data.map((item, index) => {
            this.memberCount += item.teamCount;
            if (index < 3) {
              arr.push(item);
            }
          });
          this.generationsData = arr;
        }
      });
    },

    getIncome() {
      this.$post(this.URL.income.data, {
        days: this.days,
      }).then((res) => {
        if (res.code == 0) {
          let arr = [
            // {name:this.$t('new.doc2'),value:res.data.scoreIncome}, // 评分收益
            // {name:this.$t('page.doc75'),value:res.data.recommendIncome}, // 推荐收益
            // {name:this.$t('page3.doc53'),value:res.data.financialIncome}, // 理财收益

            { name: this.$t("new.doc2"), value: res.data.scoreIncome }, // 评分收益 观影收益
            { name: this.$t("new.doc3"), value: res.data.teamIncome }, // 推荐收益 推广观影收益
            { name: this.$t("new.doc28"), value: res.data.financialIncome }, // 团队收益
          ];
          // let arr = [
          //   {name:this.$t('new.doc2'),value:3}, // 评分收益
          //   {name:this.$t('page.doc75'),value:6}, // 推荐收益
          // ]
          this.data1 = arr;
          this.myChartValue1 = arr[0].value;
          this.myChartValue2 = arr[1].value;
          this.myChartValue3 = arr[2].value;
          this.drawLine();
        }
      });
    },

    FontChart(res) {
      //获取到屏幕的宽度
      var clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return; //报错拦截：
      let fontSize = "";
      if (
        window.navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        fontSize = 10 * (clientWidth / 750);
      } else {
        fontSize = 5;
      }
      return res * fontSize;
    },
    drawLine() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));

      // 绘制图表
      myChart.setOption({
        color: ["#f7843c", "#2D68DC", "#FFDD9A"], // 环形图使用的颜色，可以根据图片中的样式进行调整
        legend: {
          show: false, // 隐藏图例
        },
        tooltip: {
          trigger: "item",
          padding: [8, 10],
          textStyle: {
            color: "#333333",
            fontSize: 14, // 字体大小可以根据需要调整
          },
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "100%"],
            center: ["50%", "50%"],
            data: that.data1,
            emphasis: {
              label: {
                show: false, // 隐藏默认标签
              },
            },
            label: {
              show: false, // 隐藏默认标签
            },
            labelLine: {
              show: false, // 隐藏引导线
            },
          },
        ],
      });
    },

    teamInfo() {
      this.$post(this.URL.income.team, {}).then((res) => {
        if (res.code == 0) {
          this.teamData = res.data;
          let arr = [
            { name: this.$t("new.doc2"), value: res.data.scoreIncome }, // 评分收益 观影收益
            { name: this.$t("new.doc3"), value: res.data.teamIncome }, // 团队收益
            { name: this.$t("new.doc28"), value: res.data.financialIncome }, // 投入理财
          ];
          this.data1 = arr;
          this.myChartValue1 = arr[0].value;
          this.myChartValue2 = arr[1].value;
          this.myChartValue3 = arr[2].value;
          this.drawLine();
        } else {
          this.$toast(res.message);
        }
      });
    },
    teamInfo1() {
      this.$post(this.URL.income.team1, {}).then((res) => {
        if (res.code == 0) {
          this.teamData1 = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  padding: 0.32rem 0;
  line-height: 0.34rem;
  color: var(--COcolor3);
  font-size: 0.32rem;
  //background: #151515;
  text-align: center;

  img {
    vertical-align: top;
    height: 0.34rem;
    margin-left: 0.1rem;
  }

  .s {
    font-size: 0.28rem;
  }

  .flex {
    align-items: center;
  }
}

.title-1 {
  color: #fff;
  font-size: 0.26rem;
  font-weight: 400;
}

.box2 {
  padding: 0.32rem;
  background: #181c21;
  border-radius: 0.24rem;

  .title_my {
    //padding: 0 0.24rem;
    margin-bottom: 0.4rem;
  }

  .title-1 {
    font-weight: 600;
    font-size: 0.28rem;
  }

  .part {
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    align-items: center;
    gap: 0.48rem;
  }
}

.box1 {
  margin-top: 0.32rem;
  margin-bottom: 0.32rem;
  border: 1px solid #f2c66e;
  border-radius: 0.2rem;
  overflow: hidden;
  background-color: #181c21;

  li {
    width: 50%;
    //padding-top: 0.32rem;
    //padding-bottom: 0.22rem;
    margin: 0;
    background-color: #181c21;

    .am {
      margin-top: 0.18rem;
      //padding-left: 0.12rem;
      font-size: 0.32rem;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #fff;
      //line-height: 0.5rem;

      span {
        font-size: 0.32rem;
      }
    }
  }
}

.btn_box {
  margin-top: 0;
  margin-bottom: 0.32rem;
}

.box3 {
  margin-bottom: 1.3rem;
  padding: 0.32rem 0.28rem;
  border-radius: 0.24rem;
  background-color: #181c21;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.32rem;

    & > div {
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: auto 1fr;
      column-gap: 0.24rem;
      row-gap: 0.08rem;

      .img {
        display: flex;
        align-items: center;
        grid-row: span 2;
      }

      .title {
        color: #a8a9ab;
        font-size: 0.24rem;
      }
    }
  }

  .title-box {
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #ffffff;
    padding-bottom: 0.32rem;
    font-size: 0.28rem;
    display: flex;
    align-items: center;

    .title {
      display: flex;
      align-items: center;
      margin-right: 0.2rem;

      div {
        margin-left: 0.1rem;
      }
    }

    .new-add {
      margin-left: auto;
      display: flex;
      align-items: center;

      div {
        margin-left: 0.1rem;
        color: #0bca57;
      }
    }
  }

  .it-box {
    display: grid;
    gap: 0.24rem;
  }

  .it {
    background: #393a3b;
    border-radius: 0.16rem;
    padding: 0.28rem 0.18rem;

    &:last-child {
      border: 0;
    }

    ul {
      & > li:first-child {
        .s {
          color: #FFDD9A;
        }
      }

      li {
        width: 33.3333%;
        text-align: center;
      }
    }

    .tit {
      color: #fff;
      margin-bottom: 0.32rem;
      margin-left: 0.3rem;
    }

    .s {
      font-size: 0.32rem;
      line-height: 0.45rem;
    }

    .n {
      margin-top: 0.12rem;
      font-size: 0.24rem;
      color: #d7d8d8;
    }
  }
}

.pi {
  background: url("../../assets/images/bg-1.png") no-repeat right center;
  background-size: 100% 100%;
  margin-bottom: 0.24rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.24rem;

  .left,
  .right {
    word-break: break-all;
    word-wrap: break-word;
  }

  .left {
    .tit {
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;

      img {
        margin-left: 0.1rem;
      }
    }

    .pic {
      position: relative;

      .momo {
        position: absolute;
        top: -1.2rem;
        left: -1.3rem;
        padding: 0.12rem;
        background: #343844;
        width: 40vw;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.18rem;
        border-radius: 0.1rem;
      }
    }

    img {
      height: 0.3rem;
    }

    .am {
      margin-top: 0.18rem;
      color: #fff;
      font-size: 0.24rem;
      font-weight: 600;

      span {
        font-size: 0.36rem;
        font-weight: 600;
      }
    }
  }

  .right {
    border-radius: 0.8rem;
    background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
    height: 0.56rem;
    flex-shrink: 0;
    padding: 0 0.3rem;
    font-size: 0.24rem;
    align-items: center;
    justify-content: center;
    display: flex;
  }
}

.title-1 {
  line-height: 0.4rem;
  display: flex;
  //align-items: center;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor1);
  text-transform: capitalize;

  img {
    height: 0.4rem;
    margin-right: 0.08rem;
  }
}

.itemBox {
  background: var(--CObackgroundLinear2);
  border-radius: 0.12rem;
  margin-bottom: 0.32rem;
  padding: 0.24rem;
}

.myChart_but {
  display: grid;
  gap: 0.3rem;

  .top {
    display: flex;
    justify-content: space-between;
  }

  .top-item {
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    color: #ffffff;
  }

  .boot {
    margin-top: 0.24rem;
    text-align: center;
    display: flex;

    //justify-content: center;
  }

  .color-box {
    //flex: 0 0 0.36rem;
    height: 0.26rem;
    width: 0.26rem;
    border-radius: 0.06rem;
    margin-right: 0.1rem;
    flex-shrink: 0;

    &.color-box1 {
      background: #f7843c;
    }

    &.color-box2 {
      background: #2d68dc;
    }

    &.color-box3 {
      background: #FFDD9A;
    }
  }

  .color-name {
    font-size: 0.24rem;
    text-align: left;
    line-height: 0.24rem;

    p {
      margin-top: 0.12rem;
      font-size: 0.28rem;
      color: #fff;
      line-height: 0.28rem;
    }
  }

  // div{
  //   border-right: .02rem solid #22222D;
  //   width: 46%;
  //   text-align: center;
  // }
  // div:last-child{
  //   border-radius: 0rem .44rem .44rem 0rem;
  // }
}

.info {
  position: relative;

  .total_revenue {
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #bdbdbd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .name {
      text-wrap: nowrap;
      color: #ffffff;
    }

    .value {
      font-size: 0.36rem;
      font-weight: bold;
      color: #FFDD9A;
      margin-top: 0.14rem;
    }
  }
}

.teamAdd {
  li {
    .s {
      color: #0bca57;
    }
  }
}
</style>
